<template>
<div>
    <a-modal
        v-model:open="state.show"
        :title="state.notice_title"
        :width="650"
    >
        <div class="notice-show">
            <a-skeleton v-if="state.loading || !state.notice_content" active />
            <div class="richText">
                <div v-html="md.render(state.notice_content)"></div>
            </div>
        </div>
        <template #footer>
            <div class="notice-footer">
                <a-button type="primary" @click="onShow">24小时不再提示</a-button>
            </div>
        </template>
    </a-modal>
</div>
</template>

<script setup lang="ts">
import {reactive, watch} from "vue"
import markdownIt from 'markdown-it'
import { useAiConfig } from '/@/stores/aiConfig'

const webConfig = useAiConfig()

const state = reactive({
    loading: true,
    show: false,
    not_showing: false,
    notice_title: '',
    notice_content: '',
})

const md = new markdownIt({
    linkify: true,
    breaks: true
})

const onShow = () => {
    state.show = false
    localStorage.setItem('is_notice', (new Date().getTime() + 86400000).toString())
}

// 24小时内不再提示
const is_notice = localStorage.getItem('is_notice')
if (is_notice) {
    if (parseInt(is_notice) > new Date().getTime()) {
        state.not_showing = true
    }
}

// 监听webConfig.notice
watch(() => webConfig.notice, (value) => {
    if (!state.not_showing) {
        if (value.show == 1) {
            state.show = true
            state.loading = false
            state.notice_title = value.title
            state.notice_content = value.content
        } else {
            state.show = false
        }
    }
})
</script>

<style scoped lang="scss">
.notice-show {
    height: 460px;
    overflow: auto;
    &::-webkit-scrollbar {
        display: none;
    }
}
.richText {
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
    word-break: break-all;
    p {
        margin-bottom: 20px;
    }
    h1 {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 20px;
    }
    h2 {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 20px;
    }
    h3 {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 20px;
    }
    h4 {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 20px;
    }
    h5 {
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 20px;
    }
    h6 {
        font-size: 12px;
        font-weight: 700;
        margin-bottom: 20px;
    }
    a {
        color: var(--el-color-primary);
        text-decoration: none;
    }
    a:hover {
        color: var(--el-color-primary-hover);
    }
    ul {
        margin-bottom: 20px;
        padding-left: 20px;
        li {
            margin-bottom: 10px;
        }
    }
    ol {
        margin-bottom: 20px;
        padding-left: 20px;
        li {
            margin-bottom: 10px;
        }
    }
    blockquote {
        margin-bottom: 20px;
        padding: 10px 20px;
        border-left: 5px solid var(--el-color-primary);
        background-color: var(--el-color-primary-light);
    }
    code {
        padding: 2px 4px;
        border-radius: 4px;
        background-color: var(--el-color-primary-light);
    }
    img {
        max-width: 100%;
    }
}
.notice-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
</style>
